<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>异步组件</title>
    <script src='./vue.global.js'></script>
</head>
<body>
    <div id='app'>
        <!-- <async-com></async-com> -->

        <!-- 使用suspense来加载异步组件 -->
        <suspense>

            <!-- 显示正常内容：加载需要一定时间 -->
            <!-- <template v-slot:default> -->
            <template #default>
                <async-com></async-com>
            </template>

            <!-- 显示加载过程 -->
            <!-- <template v-slot:fallback> -->
            <template #fallback>
                <h1>Loading...</h1>
            </template>

        </suspense>
    </div>

    <script>
        /* 解构赋值：从Vue对象中提取我想要的东西 */
        const {createApp,defineAsyncComponent} = Vue

        const app = createApp({
            data(){
                return {}
            },
            methods:{},
            computed:{}
        })

        /* 定义普通组件/同步组件 */
        // app.component("async-com",{
        //     template:`<div>哥是异步组件</div>`
        // })

        /* 定义异步组件 */
        const AsynCom = defineAsyncComponent(

            /* 入参是一个回调函数：suspense加载内容时回调 */
            ()=>{
               // 返回一个延时履约/兑现组件内容的Promise对象
               return new Promise(
                (resolve,reject)=>{

                    /* 在3秒后履约组件数据 */
                    setTimeout(() => {
                        resolve({
                            template:`<div>哥是异步组件</div>`
                        })
                    }, 3000);
                    
                }
               ) 
            }

        )

        app.component("async-com",AsynCom)

        app.mount('#app')
    </script>
</body>
</html>